<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html >
<head>
    <meta charset="UTF-8">
    <title>HappyOJ</title>
    <meta http-equiv="keywords" content="ACM,OJ,OnlineJudge,JAVA,C++,HappyOJ,IDE,在线判题系统,在线IDE">
    <meta http-equiv="description" content="HappyOJ是一个源程序判题系统。用户可以在线提交多种程序（如C、C++、Java）源代码，系统对源代码进行编译和执行，并通过预先设计的测试用例来检验程序源代码的正误。 用户可以在Online Judge系统上练习编程，参加竞赛，与其他用户讨论交流，提高自己的编程水平，并可以用于数据结构、程序设计教学的实验和考试。">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="css/styles.css" >
    <link rel="stylesheet" th:href="@{/js/editormd/css/editormd.css}" />
    <link rel="stylesheet" th:href="@{/js/editormd/css/editormd.preview.css}" />
    <script src="js/jquery-1.7.2.js"></script>
    <script src="js/gdoj.js"></script>
    <script type='text/javascript' th:src="@{/js/editormd/lib/marked.min.js}"></script>
    <script type='text/javascript' th:src="@{/js/editormd/lib/prettify.min.js}"></script>
    <script type='text/javascript' th:src="@{/js/editormd/editormd.min.js}"></script>
    <script type='text/javascript' th:src='@{/js/editor-md.js}'></script>
</head>
<body>
<div th:replace="common::web-navbar"></div>
<div class="container">
    <div class="content">
        <div class="content-search">
            <div class="search-tools">
                <div class="search">
                    <input class="search-input" name="search" type="text" th:placeholder="#{search-placeholder}" th:value="${q}"/>
                </div>
                <div class="search-type">
                    <div class="item search-type-problem current">
                        <svg class="search-type-icon" viewBox="0 0 1024 1024" p-id="18087"><path d="M109.714286 182.857143c0-81.627429 67.657143-146.285714 149.065143-146.285714h506.441142c81.408 0 149.065143 64.658286 149.065143 146.285714v658.285714c0 81.700571-67.657143 146.285714-149.138285 146.285714H258.779429C177.371429 987.428571 109.714286 922.770286 109.714286 841.142857v-658.285714z m149.065143-73.142857c-42.788571 0-75.922286 33.645714-75.922286 73.142857v658.285714c0 39.497143 33.133714 73.142857 75.922286 73.142857h506.368c42.861714 0 75.995429-33.645714 75.995428-73.142857v-658.285714c0-39.497143-33.133714-73.142857-75.922286-73.142857H258.779429zM306.614857 292.571429a36.571429 36.571429 0 0 1 36.571429-36.571429h337.627428a36.571429 36.571429 0 1 1 0 73.142857H343.186286a36.571429 36.571429 0 0 1-36.571429-36.571428z m0 164.571428a36.571429 36.571429 0 0 1 36.571429-36.571428h337.627428a36.571429 36.571429 0 1 1 0 73.142857H343.186286a36.571429 36.571429 0 0 1-36.571429-36.571429z m0 164.571429a36.571429 36.571429 0 0 1 36.571429-36.571429H512a36.571429 36.571429 0 0 1 0 73.142857H343.186286a36.571429 36.571429 0 0 1-36.571429-36.571428z" p-id="18088" fill="#8a8a8a"></path></svg>
                        <span class="search-type-name">[[#{problem}]]</span>
                    </div>
                    <div class="item search-type-user">
                        <svg class="search-type-icon" viewBox="0 0 1025 1024" p-id="13594"><path d="M381.866667 414.72A173.738667 173.738667 0 0 1 208.341333 241.194667a173.781333 173.781333 0 0 1 173.525334-173.568 173.781333 173.781333 0 0 1 173.568 173.568A173.781333 173.781333 0 0 1 381.866667 414.72z m0-261.802667a88.32 88.32 0 0 0 0 176.469334c48.682667 0 88.234667-39.552 88.234666-88.192s-39.594667-88.277333-88.234666-88.277334z" fill="#8a8a8a" p-id="13595"></path><path d="M85.333333 953.002667h-85.333333c0-12.245333 0.341333-24.448 0.981333-36.48 13.781333-255.957333 179.370667-441.728 393.728-441.728 65.408 0 130.133333 21.077333 187.178667 60.970666l-48.853333 69.930667c-43.264-30.208-89.813333-45.525333-138.325334-45.525333-170.197333 0-297.045333 148.437333-308.48 360.96-0.597333 10.496-0.896 21.12-0.896 31.872z" fill="#8a8a8a" p-id="13596"></path><path d="M1025.109333 953.002667h-85.333333c0-125.909333-81.92-228.394667-182.570667-228.394667s-182.528 102.442667-182.528 228.394667h-85.333333c0-173.013333 120.149333-313.728 267.861333-313.728 147.712 0 267.904 140.714667 267.904 313.728z" fill="#8a8a8a" p-id="13597"></path><path d="M757.162667 596.821333a144.426667 144.426667 0 0 1-144.213334-144.213333 144.384 144.384 0 0 1 144.213334-144.213333 144.426667 144.426667 0 0 1 144.256 144.213333 144.384 144.384 0 0 1-144.256 144.213333z m0-203.093333c-32.469333 0-58.88 26.410667-58.88 58.88a58.922667 58.922667 0 0 0 117.802666 0c0-32.469333-26.410667-58.88-58.922666-58.88z" fill="#8a8a8a" p-id="13598"></path></svg>
                        <span class="search-type-name">[[#{user}]]</span>
                    </div>
                    <div class="item search-type-topic">
                        <svg class="search-type-icon" viewBox="0 0 1024 1024" p-id="12453"><path d="M810.666667 256h42.666666a128 128 0 0 1 128 128v363.221333A106.112 106.112 0 0 1 875.221333 853.333333h-53.76a42.666667 42.666667 0 0 0-38.442666 24.277334l-26.026667 54.442666a85.333333 85.333333 0 0 1-155.648-3.584l-20.693333-49.066666a42.666667 42.666667 0 0 0-39.296-26.069334h-113.92a42.666667 42.666667 0 0 1 0-85.333333h113.92a128 128 0 0 1 117.930666 78.250667l20.693334 49.066666 26.026666-54.485333A128 128 0 0 1 821.504 768h53.717333c11.477333 0 20.778667-9.301333 20.778667-20.778667V384a42.666667 42.666667 0 0 0-42.666667-42.666667h-42.666666v255.317334a128.128 128.128 0 0 1-127.872 128.298666h-213.589334c-35.712 0-90.197333 22.485333-115.370666 47.530667l-37.418667 37.205333C272.981333 852.906667 213.333333 829.098667 213.333333 767.232h85.333334v0.682667H213.333333c0-24.277333-19.541333-44.373333-43.605333-44.885334A130.261333 130.261333 0 0 1 42.666667 593.450667V255.658667A127.744 127.744 0 0 1 170.410667 128h512.512A128.085333 128.085333 0 0 1 810.666667 256zM298.666667 767.914667H213.333333v-0.682667h85.333334v0.682667z m-10.24-50.688l5.248-5.248c41.130667-40.96 117.290667-72.362667 175.530666-72.362667h213.589334c23.381333 0 42.538667-19.2 42.538666-42.965333V256.298667C725.333333 232.576 706.218667 213.333333 682.922667 213.333333H170.410667A42.410667 42.410667 0 0 0 128 255.658667v337.792c0 23.68 19.669333 43.733333 43.605333 44.288A130.133333 130.133333 0 0 1 288.426667 717.226667z" p-id="12454" fill="#8a8a8a"></path><path d="M256 384h341.333333a42.666667 42.666667 0 0 0 0-85.333333H256a42.666667 42.666667 0 1 0 0 85.333333zM256 554.666667h256a42.666667 42.666667 0 0 0 0-85.333334H256a42.666667 42.666667 0 1 0 0 85.333334z" p-id="12455" fill="#8a8a8a"></path></svg>
                        <span class="search-type-name">[[#{topic}]]</span>
                    </div>
                </div>
            </div>
            <div class="problems-layout">
                <table class="problem">
                    <tr class="header">
                        <th class="status left-item">[[#{problem.status}]]</th>
                        <th class="title">
                            [[#{problem}]]
                            <div style="float:right;text-align:right;padding: 0px;">[[#{tag}]]</div>
                        </th>
                        <th class="solved">
                            [[#{problem.statistic}]]
                        </th>
                    </tr>
                </table>
            </div>
            <div class="users-layout">
            </div>
            <div class="topics-layout">
                <div id="RecentBlogs">
                </div>
            </div>

        </div>
    </div>
    <div th:replace="common::web-footer"></div>
</div>
<script>
    $(document).ready(function(){
        var limit = 20;
        var showType = 0;
        var searchProblemWord = "";
        var numProblem = 0;
        var searchUserWord = "";
        var numUser = 0;
        var searchTopicWord = "";
        var numTopic = 0;

        function showProblems(problems) {
            $.each(problems, function(i, event) {
                var opt = ""
                if (i%2 == 1) {
                    opt += '<tr class=\"dark\">';
                } else {
                    opt += '<tr>';
                }
                opt += "<td class=\"status left-item\">";
                if (problems[i].status == 1) {
                    opt += "<svg class=\"problem-user-status\" viewBox=\"0 0 1024 1024\" p-id=\"15210\"><path d=\"M512.640551 914.284317a402.259998 402.259998 0 1 1 124.334908-784.772688l84.840291-84.4746a511.967271 511.967271 0 1 0 134.939945 845.477379l-77.160782-76.795091A399.334471 399.334471 0 0 1 512.640551 914.284317zM373.312315 363.188119L293.226006 438.886137l305.717599 292.552726 80.086309-73.138182 344.115144-329.121816-79.720618-78.989236-344.115144 329.121816z\" fill=\"#8DC21F\" p-id=\"15211\"></path></svg>";
                } else if (problems[i].status == 2){
                    opt += "<svg class=\"problem-user-status\" viewBox=\"0 0 1024 1024\" p-id=\"33088\"><path d=\"M0 512a512 512 0 1 1 1024 0A512 512 0 0 1 0 512z m93.013333 0a418.986667 418.986667 0 1 0 837.973334 0 418.986667 418.986667 0 0 0-837.973334 0z m355.84 58.709333l-29.354666-245.504a82.688 82.688 0 1 1 164.096 0l-29.44 245.504a53.077333 53.077333 0 0 1-105.301334 0zM503.466667 791.296a69.802667 69.802667 0 1 1 0-139.690667 69.802667 69.802667 0 0 1 0 139.690667z\" fill=\"#F86060\" p-id=\"33089\"></path></svg>";
                }
                opt += "</td>";
                opt += "<td class=\"title\">";
                opt += "<div class=\"problem-link\">";
                opt += "<a href='/problemset/problem/" + problems[i].problem_id + "'> "+ problems[i].problem_id +"."+problems[i].title + "</a>"
                opt += "</div><div class=\"tags\" style=\"float:right;text-align:right;padding: 0px;\">";
                for (j = 0; j < problems[i].tags.length; j++) {
                    opt += "<span>";
                    opt += "<a href=\"/problemset?tag=" + problems[i].tags[j].name + "\" class=\"tag\" tag=\"" + problems[i].tags[j].name + "\">"+problems[i].tags[j].name+"</a>"
                    opt += "</span>"
                }

                opt += "</div></td><td class=\"solved\"><a title=\"users solved this problem\" href='/problemset/" + problems[i].problem_id + "/status/page/1'>" + problems[i].solved + "</a>";
                opt += "<span class=\"statistic-submit\" title=\"all submissions\">/&nbsp;" + problems[i].submit + "</span>";
                opt += "</td></tr>"
                $(".problem tr:last").after(opt);
                numProblem += 1;
            });
        }
        function showUsers(users) {
            $.each(users, function(i, event) {
                var opt = "";
                opt += "<div class='search-user-item roundbox'>";
                    opt += "<div class='h'>"
                        opt += "<a href='/profile/" + users[i].username +"' class='u user-tip' user='"+users[i].username+"'>"
                        opt += "<img class=\"normal-avatar\" src=\"" + users[i].avatar + "\" /></a>"
                        opt += "<div class='i'>"
                        opt += "<span style=\"font-size: 16px;\" class=\"rated-user user-rate-"+users[i].rate+"\">" + users[i].username +"</span>"
                        if (users[i].nickname != null && users[i].nickname.length>0) {
                            opt += "<span class='nickname'>@" + users[i].nickname +"</span>"
                        }
                        if (users[i].motto != null) {
                            opt += "<span class='motto'>" + users[i].motto +"</span>"
                        }
                        opt += "</div>";
                    opt += "</div>";
                    opt += "<div class='b'>"
                    if (users[i].city != null) {
                        opt += "<span class='item'>"
                        opt += "<svg class=\"icon-svg-profile\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" ><g><path d=\"M12 7c-1.93 0-3.5 1.57-3.5 3.5S10.07 14 12 14s3.5-1.57 3.5-3.5S13.93 7 12 7zm0 5c-.827 0-1.5-.673-1.5-1.5S11.173 9 12 9s1.5.673 1.5 1.5S12.827 12 12 12zm0-10c-4.687 0-8.5 3.813-8.5 8.5 0 5.967 7.621 11.116 7.945 11.332l.555.37.555-.37c.324-.216 7.945-5.365 7.945-11.332C20.5 5.813 16.687 2 12 2zm0 17.77c-1.665-1.241-6.5-5.196-6.5-9.27C5.5 6.916 8.416 4 12 4s6.5 2.916 6.5 6.5c0 4.073-4.835 8.028-6.5 9.27z\"></path></g></svg>"
                        opt += "<span>"+users[i].city+"</span>"
                        opt += "</span>"
                    }

                    opt += "<span class='item'>"
                    opt += "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" class=\"icon-svg-profile\"><g><path d=\"M7 4V3h2v1h6V3h2v1h1.5C19.89 4 21 5.12 21 6.5v12c0 1.38-1.11 2.5-2.5 2.5h-13C4.12 21 3 19.88 3 18.5v-12C3 5.12 4.12 4 5.5 4H7zm0 2H5.5c-.27 0-.5.22-.5.5v12c0 .28.23.5.5.5h13c.28 0 .5-.22.5-.5v-12c0-.28-.22-.5-.5-.5H17v1h-2V6H9v1H7V6zm0 6h2v-2H7v2zm0 4h2v-2H7v2zm4-4h2v-2h-2v2zm0 4h2v-2h-2v2zm4-4h2v-2h-2v2z\"></path></g></svg>"
                    opt += "<span>"+users[i].registerDateFriendly+"</span>"
                    opt += "</span>"

                    opt += "<span class='item'>"
                    opt += "<svg class=\"icon-svg-profile\" viewBox=\"0 0 1024 1024\" ><path d=\"M875.31 380.22c-0.01-0.03-0.01-0.06-0.02-0.1C853.24 155.29 635.4 82.85 635.4 82.85 535.21 50.42 439.9 70.27 439.55 70.34h-0.01C207 100.33 148.25 365.18 148.25 365.18c-31.54 170.82 88.33 317.1 90.53 319.77 0.02 0.02 0.04 0.05 0.06 0.07 31.37 29.56 258.2 253.82 266.57 262.08 0.15 0.15 0.36 0.23 0.57 0.23 7.69 8.86 21.25 8.81 28.86-0.11C586 887.25 767.58 702.49 767.58 702.49 917.96 558.91 876.1 383.47 875.31 380.22zM515.67 702.26c-142.56 0-259-114.16-266.35-257.8-8.23-160.83 122.91-294.69 280.49-286.29 140.73 7.5 252.58 126.34 252.58 271.85 0 150.35-119.42 272.24-266.72 272.24z\" fill=\"#536471\" p-id=\"10933\"></path><path d=\"M612.36 444.58H510.88V292.1c0-16.14-13.21-29.35-29.35-29.35s-29.35 13.21-29.35 29.35v183.01c0 16.14 13.21 29.35 29.35 29.35 2.86 0 5.62-0.42 8.24-1.19h122.59c14.05 0 25.55-11.5 25.55-25.55v-7.58c0.01-14.07-11.49-25.56-25.55-25.56z\" fill=\"#536471\" p-id=\"10934\"></path></svg>"
                    opt += "<span>"+users[i].lastAccessTimeFriendly+"</span>"
                    opt += "<span class='user-online-state"+users[i].online+"'>"+users[i].onlineState+"</span>"
                    opt += "</span>"
                    opt += "</div>";
                opt += "</div>";
                $(".users-layout").append(opt);
                numUser += 1;
            });
        }

        function getImagesFromMarkdown(markdownText, idx) {
            // 正则表达式匹配Markdown图片语法
            const imageRegex = /!\[.*\]\((.*?)\)/g;
            const images = [];

            let match;
            while ((match = imageRegex.exec(markdownText)) !== null) {
                images.push(match[idx]); // 添加图片链接到数组
            }

            return images;
        }
        function showTopics(topics) {
            $.each(topics, function(i, event) {
                var content_pic = ""
                var content_abstract = topics[i].content_abstract
                var images = getImagesFromMarkdown(content_abstract, 0)
                if (images.length > 0) {
                    content_pic = getImagesFromMarkdown(images[0], 1);
                    for (idx = 0; idx < images.length; idx++) {
                        content_abstract = content_abstract.replace(images[idx], "")
                    }
                }

                var opt = "<ul class='BlogList roundbox'>"
                opt += "<li class=\"topic-item\">";
                opt += "<a href='/profile/" + topics[i].create_user +"' class='u user-tip' user='"+topics[i].create_user+"'>"
                opt += "<img class=\"normal-avatar\" src=\"" + topics[i].user.avatar + "\" /></a>"
                opt += "<div class='b'>";
                opt += "<span class=\"title\">"
                opt += "<a href='/topic/"+ topics[i].message_id +"'>"+ topics[i].title +"</a>"
                opt += "</span>"
                opt += "<div class=\"tags\">";
                for (j = 0; j < topics[i].tags.length; j++) {
                    opt += "<span>";
                    opt += "<a href=\"/topics?tag=" + topics[i].tags[j].name + "\" class=\"tag\" tag=\"" + topics[i].tags[j].name + "\">"+topics[i].tags[j].name+"</a>"
                    opt += "</span>"
                }
                opt += "</div>"
                opt += "<div class='search-topic'>"
                    if (content_pic.length > 0) {
                        opt += "<div class='search-topic-pic'><img style='max-width: 120px;max-height: 70px' src='"+content_pic+"'></div>"
                    }
                    opt += "<div class='search-topic-abst'>"
                        if (topics[i].mode == 1) {
                            opt += "<div messageId='"+ topics[i].message_id +"' class=\"abstract markdown-view\" id=\"topic-content-markdown-view" + topics[i].message_id +"\">"
                            opt += "<span>" + content_abstract + "</span>"
                            opt += "</div>"
                        } else {
                            opt += "<span messageId='"+ topics[i].message_id +"' class=\"abstract\">" + content_abstract +"</span>"
                        }
                        opt += "</div>"
                    opt += "</div>"
                opt += "</div>"
                opt += "<div class=\"buttom\">"
                    opt += "<div class='search-topic-stat'>"
                        opt += "<span class=\"div-icon-svg\">"
                        opt += "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" class=\"icon-svg\"><g><path d=\"M8.75 21V3h2v18h-2zM18 21V8.5h2V21h-2zM4 21l.004-10h2L6 21H4zm9.248 0v-7h2v7h-2z\"></path></g></svg>"
                        opt += topics[i].kviews
                        opt += "</span>"
                        opt += "<span class=\"div-icon-svg\">"
                        opt += "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" class=\"icon-svg\"><g><path d=\"M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z\"></path></g></svg>"
                        opt += topics[i].comments
                        opt += "</span>"
                    opt += "</div>"
                opt += "</div>"
                opt += "</li></ul>";
                $("#RecentBlogs").append(opt);
                numTopic += 1;
            });
        }
        function problemSearch(word) {
            if (searchProblemWord !== word) {
                $('table.problem tr:not(:first)').empty();
                numProblem = 0;
                searchProblemWord = word;
            }
            if (word.trim().length == 0) {
                return;
            }

            $.getJSON("/api/problem/search",{q: word, limit: limit, offset: numProblem},function(json) {
                if (json.success != true) {
                    showProblems(json.data);
                    if (json.data.length == limit) {
                        if (document.documentElement.clientHeight == document.documentElement.scrollHeight) {
                            setTimeout(function () { problemSearch(word); }, 500);
                        }
                    }
                }
            });
        }
        function userSearch(word) {
            if (searchUserWord !== word) {
                $('.users-layout').html("");
                numUser = 0;
                searchUserWord = word;
            }
            if (word.trim().length == 0) {
                return;
            }

            $.getJSON("/api/user/search",{q: word, limit: limit, offset: numUser},function(json) {
                if (json.success != true) {
                    showUsers(json.data);
                    if (json.data.length == limit) {
                        if (document.documentElement.clientHeight == document.documentElement.scrollHeight) {
                            setTimeout(function () { showUsers(word); }, 500);
                        }
                    }
                }
            });
        }

        function topicSearch(word) {
            if (searchTopicWord !== word) {
                $('#RecentBlogs').html("");
                numTopic = 0;
                searchTopicWord = word;
            }
            if (word.trim().length == 0) {
                return;
            }

            $.getJSON("/api/topic/search",{q: word, limit: limit, offset: numTopic},function(json) {
                if (json.success != true) {
                    showTopics(json.data);
                    if (json.data.length == limit) {
                        if (document.documentElement.clientHeight == document.documentElement.scrollHeight) {
                            setTimeout(function () { showTopics(word); }, 500);
                        }
                    } else {

                    }
                }
            });
        }

        function showTable(){
            if (showType === 0) {
                problemSearch($(".search-input").val());
            }
            if (showType === 1) {
                userSearch($(".search-input").val());
            }
            if (showType === 2) {
                topicSearch($(".search-input").val());
            }
        }

        $(".search-input").bind('input propertychange',function(e) {
            if (window.event && event.type == 'propertychange' && event.propertyName != 'value')
                return;

            window.clearTimeout($(this).data('timeout'));
            $(this).data('timeout', setTimeout(function () {
                showTable();
            }, 1000));
        });

        window.addEventListener("scroll", function () {
            var clientHeight = document.documentElement.clientHeight;
            var scrollTop = document.documentElement.scrollTop
            var scrollHeight = document.documentElement.scrollHeight;
            if (scrollHeight - scrollTop - clientHeight <= 3) {
                window.scrollTo(0, scrollTop - 10);
                setTimeout(function () { showTable(); }, 500);
            }
        });

        showTable();

        $(".search-type-problem").click(function(){
            showType = 0;
            $(".search-type-problem").attr("class", "item search-type-problem current")
            $(".search-type-user").attr("class", "item search-type-user")
            $(".search-type-topic").attr("class", "item search-type-topic")
            $(".problems-layout").css("display", "inline");
            $(".users-layout").css("display", "none");
            $(".topics-layout").css("display", "none");
            showTable()
        });
        $(".search-type-user").click(function(){
            showType = 1;
            $(".search-type-problem").attr("class", "item search-type-problem")
            $(".search-type-user").attr("class", "item search-type-user current")
            $(".search-type-topic").attr("class", "item search-type-topic")
            $(".problems-layout").css("display", "none");
            $(".users-layout").css("display", "inline");
            $(".topics-layout").css("display", "none");
            showTable()
        });
        $(".search-type-topic").click(function(){
            showType = 2;
            $(".search-type-problem").attr("class", "item search-type-problem")
            $(".search-type-user").attr("class", "item search-type-user")
            $(".search-type-topic").attr("class", "item search-type-topic current")
            $(".problems-layout").css("display", "none");
            $(".users-layout").css("display", "none");
            $(".topics-layout").css("display", "inline");
            showTable()
        });

    });
</script>
<script>
    $(document).ready(function(){
        $(document).on("click", ".abstract",function() {
            var messageId = $(this).attr("messageId");
            window.location = "/topic/"+messageId;
            return false;
        });
    });
</script>
</body>
</html>
